<template>
  <div class="app-container">
    <el-col :span="24">
      <div style="width:100%;height:100%;">
        <TianDiTu :zoom="12" :shape-type="'polyline'" :point-list="path"
                  @pickLngLat="pickLngLat"></TianDiTu>
      </div>
    </el-col>
  </div>
</template>

<script>
import {
  getPoint,
} from "@/api/module/event/patrol/point";
import Template from "@/views/module/wx/template.vue";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listTerminalsPoint} from "@/api/module/event/terminal/terminals";
import {listWorkPointRecord} from "@/api/module/survey/record";

export default {
  name: "Point",
  components: {Template},
  data() {
    return {
      map: undefined,
      marker: undefined,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 巡更点表格数据
      pointList: [],
      tipinput: '',
      titleSurvey: "",
      info: undefined,
      propertyListOptions: [],
      estatesOptions: [],
      surveyTemplateList: [],
      surveyStandardList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      eventWorkId: undefined,
      openTemplate: undefined,
      openSurvey: undefined,
      qrList: [],
      eventType: undefined,
      // 查询参数
      queryParam: {
        eventWorkId: undefined,
        eventType: undefined,
      },
      test: [],
      path: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    }
  },
  created() {
    this.queryParam.eventType = this.$route.query.eventType ? this.$route.query.eventType : undefined;
    this.queryParam.eventWorkId = this.$route.query.eventWorkId ? this.$route.query.eventWorkId : undefined;
    this.getMap();
  },
  methods: {
    pickLngLat(e){
      console.log('getLngLat e === ', e)
      // this.form.longitude = e.lng.toFixed(6);
      // this.form.latitude = e.lat.toFixed(6);
    },
    getMap() {
      listWorkPointRecord(this.queryParam).then(response => {
        this.test = response;
        console.log(response)
        let that = this;
        this.$nextTick(() => {
          for (var i = 0; i < that.test.pointLng.length; i++) {
            let point = { lng :that.test.pointLng[i],  lat: that.test.pointLat[i]}
            that.path.push(point);
          }
          //绘制折线
          console.log(this.path);
        });
      });
    },
  }
};
</script>


<style lang="scss" scoped>
.mapSelect {
  position: absolute;
  top: 5px;
  right: 1px;
  background: #fff none repeat scroll 0 0;
  border: 1px solid #ccc;
  margin: 10px auto;
  padding: 6px;
  font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
  font-size: 14px;
}
</style>

<style lang="scss">
.amap-sug-result {
  z-index: 99999 !important;
}
</style>
